<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=q, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <a href="#/cz">陈臻</a>
    <a href="#/cy">陈欲</a>
    <a href="#/ch">陈好</a>
    <!-- 占位符 -->
    <component :is="comName"></component>
  </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/vue_router.js"></script>
<script>
  // 定义组件
  const cz = {
    template: "<h1>好人</h1>"
  }
  const cy = {
    template: "<h1>人人</h1>"
  }
  const ch = {
    template: "<h1>必须的</h1>"
  }
  // ==定义组件==

  const vm = new Vue({
    el: "#app",
    data: {
      comName: "ch"
    },
    methods: {},
    components: {
      cz,
      cy,
      ch
    }
  });

  window.onhashchange = () => {
    let index = location.hash.slice(1);
    console.log(location.hash.slice(1));
    switch (index) {
      case "/cz":
        vm.comName = "cz";
        break;
      case "/cy":
        vm.comName = "cy";
        break;
      case "/ch":
        vm.comName = "ch";
        break;
    }
  };
</script>

</html>